// 用户信息列表
<template>
  <el-row class="content">

    <div>
      <table class="myTable">
        <thead>
          <tr>
            <th colspan="2">
              会员资料
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in userMap.member" :key="index">
            <td class="myTableTd textRight">
              {{item}}
            </td>
            <td class="textLeft">
              {{memberInfo[index]}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div>
      <div class="game_class">
        <ul v-for="(item,key) in memberInfo.classify_games" :key="key">
          <li>
            <span>
            {{key}}
          </span>
            <button v-for="(subItem,index) in item" :key="index" @click="changeGame(index)" :class="{'selected':index === game_code}">
              {{subItem}}
            </button>
          </li>
        </ul>
      </div>

      <div>
        <table class="myTable">
          <thead>
            <tr>
              <th>
                玩法
              </th>
              <th>
                {{memberInfo.handicaps}}退水
              </th>
              <th>
                单注最低
              </th>
              <th>
                单注最高
              </th>
              <th>
                单期最高
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" class="myTableTr">
              <td v-for="(subItem, subIndex) in item" :key="'subIndex'+subIndex">
                {{subItem}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射
  import { getUserName } from '@/utils/auth'
  export default {
    computed: {
      ...mapGetters([
        'memberInfo',
        'memberGames',
        'memberPages',
        'memberLottery',
        'memberOdds',
        'memberGameSelected',
        'memberPageSelected',
      ]),
      list() {
        const tempList = this.memberInfo.commissions[this.game_code]
          ? Object.values(this.memberInfo.commissions[this.game_code])
          : []
        // 删除字段
        for (const key in tempList) {
          delete tempList[key].type
          delete tempList[key].category_code
        }
        return tempList
      },
    },
    data() {
      return {
        loading: false,
        game_code: null,
        userMap: userMap, // 用户字段映射
      }
    },

    // 数据格式化
    filters: {
      filterHandicaps() {},
      // 根据操作,返回修改额度的最大值
    },
    created() {
      this.$store.dispatch('MemberGetInfo', { username: getUserName(), set: true })
        .then(() => {
          this.game_code = Object.keys(this.memberInfo.commissions)[0]
        })
    },
    methods: {
      changeGame(value) {
        this.game_code = value
      },
      headerClass(...args) {
        return 't-header'
      },
    },
    watch: {
      $route(to, from) {},
    },
  }
</script>
<style scoped>
  .content {
    padding: 5px;
    margin-left: 190px;
  }
  .input-contain {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .member-odd .el-row {
    background-color: beige;
    padding: 3px;
  }
  .member-odd .el-row .el-col {
    padding: 3px;
  }
  .game-card {
    padding-right: 5px;
  }
  .card-title {
    margin-top: 8px;
    height: 30px;
    border: 1px solid #cdcfd4;
    background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  .card-content .el-col {
    border: 1px solid #cdcfd4;
    height: 35px;
    line-height: 35px;
    border-top: none;
    text-align: center;
  }
  .card-content .card-left {
    background-color: rgb(236, 243, 256);
  }
  .card-content .card-middle {
    border-left: none;
    color: red;
  }
  .card-content .card-right {
    border-left: none;
  }
  .table-label {
    background-color: rgb(237, 248, 248);
  }
  .t-header{
    height: 30px;
    border: 1px solid #cdcfd4;
    background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
  }
  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    font-size:12px;
  }
  .myTable th{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
  }
  .myTable td{
    color: #131950;
    line-height: 25px;
    padding: 1px 5px;
    box-sizing: border-box;
    text-align: center;
  }
  .myTableTd{
    width: 18%;
  }
  .textLeft{
    text-align: left !important;
  }
  .textRight{
    text-align: right !important;
  }
  .game_class{

  }
  .game_class ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    overflow: hidden;
  }
  .game_class li {
    padding: 0 0 0 60px;
    margin: 0;
    border: 0;
    list-style: none;
    overflow: hidden;
  }
  .game_class span {
    position: absolute;
    display: block;
    width: 60px;
    font-size: 14px;
    line-height: 32px;
    font-weight: bold;
    text-indent: 8px;
    margin: 0 0 0 -60px;
    float: left;
  }
  .game_class button{
    border:none;
    display: block;
    width: 140px;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    margin: 4px 4px 0 0;
    float: left;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
</style>

